<template>
  <!-- 用车审批 -->
  <div>
    <div class="header-fixed">
      <Header :text="text">
        <!-- 筛选条件 -->
        <section style="width: 100%">
          <div class="right" @click="handleChoose">
            <span>{{$t('m.screen')}}<van-icon name="filter-o" /></span>
          </div>
        </section>
      </Header>
    </div>
    <!-- 筛选弹框 -->
    <ApprovalChoose :show="show" @handleClose="handleClose" @handleOk="handleOk"/>
    <!-- Content -->
    <Scroll
        class="scroll-content"
        ref="scroll"
        @pulling="loadMore"
        @pullDown="handleDown"
    >
      <ApprovalDetail
          v-for="(item,index) in list"
          v-animation
          :key="index"
          :carType="index"
          :class="index % 3 === 0 ? 'backColor':''"
          :transportObj="item"
          @click.native="handleDetail(item)"
      />
      <div class="bottom-text" v-if="showBottom">-----{{$t('m.last')}}-----</div>
    </Scroll>
  </div>
</template>

<script>
import Header from '@/components/common/Header'
import Scroll from "@/components/common/scroll/Scroll"
import ApprovalChoose from './components/ApprovalChoose'
import ApprovalDetail from "./components/ApprovalDetail"
import { $approval } from '@/api/approval'
export default {
  data() {
    return {
      show: false,
      text: '',
      list: [],
      totalCount: 0,
      searchForm: {
        applicationStartTime: '',
        applicationEndTime: '',
        approvalStartTime: '',
        approvalEndTime: '',
        aog: -1,
        limit: 10,
        page: 0,
        state: -5,
        fileType: 1,
        transportType: '用车审批'
      },
      isRefresh: false,
      showBottom: false
    }
  },
   components: {
    Header,
    Scroll,
    ApprovalChoose,
    ApprovalDetail
  },
  watch: {
    '$route' (val) {
      if (val.name === 'HomeWork') {
        this.isRefresh = true
        this.searchForm = this.$options.data().searchForm
      }
      if(val.name === 'ApplyBatch') {
        this.isRefresh = true
      }
    }
  },
  activated() {
    this.text = this.$t(this.$route.query.type)
    if(this.isRefresh) {
      this.handleDown()
      this.$refs.scroll.scroll.scrollTo(0, 0)
      this.isRefresh = false
    }
  },
  methods: {
    handleChoose() {
      this.show = true
    },
    handleClose(value, obj) {
      if(value === 1) {
        obj.applicationStartTime = ''
        obj.applicationEndTime = ''
        obj.approvalStartTime = ''
        obj.approvalEndTime = ''
        this.handleOk(obj)
      }
      this.show = false
    },
    // 加载数据
    getList() {
      this.searchForm.page++
      if (sessionStorage.getItem('accountType') === 'user') this.searchForm.searchTransportType = 1
      $approval
        .search(this.searchForm)
        .then(res => {
          if (res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
          this.list.push(...res.data.list)
          this.totalCount = res.data.totalCount
          this.totalCount === this.list.length ? this.showBottom = true : this.showBottom = false
        })
        .catch(err => this.$msg.fail(err.msg || err.message || '出错了'))
        .finally(() => {
          this.$refs.scroll.finishPullUp()
          this.$refs.scroll.refresh()
        })
    },
    // 加载更多
    loadMore() {
      if(this.list.length === this.totalCount) return
      this.getList()
      this.$refs.scroll.refresh()
    },
    // 下拉刷新
    handleDown() {
      this.list = []
      this.searchForm.page = 0
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullDownRefresh()
      this.getList()
    },
    handleDetail(item) {
      let transportObj = sessionStorage.setItem('transportObj',JSON.stringify(item))
      this.$router.push({
        path: '/transport/applyBatch',
        query: {
          text: `${this.$t('router.applyDetail')}`,
          type: '是'
        }
      })
    },
    // 点击确定查询
    handleOk(obj) {
      this.list = []
      this.searchForm = {
        ...this.searchForm,
        ...obj
      }
      this.searchForm.page = 0
      this.getList()
      this.$refs.scroll.scroll.scrollTo(0, 0)
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$t(this.$route.query.type)
    this.getList()
  }
}
</script>

<style scoped src="@/assets/css/transport/approval.css">

</style>
